<script lang="ts" setup>
  import dayjs from 'dayjs';
  import { Message, Modal } from '@arco-design/web-vue';
  import { ref, onMounted } from 'vue';
  import useTable from '@/hooks/table';
  import { GameRule } from '@/types/game';
  import { getGameRuleList, deleteGameRule } from '@/api/game-rule';
  import RuleEditor from '@/views/game/rule/rule-editor.vue';

  const editorConfig = ref<{
    visible: boolean;
    gameRule?: GameRule;
  }>({
    visible: false,
  });

  const { loading, list } = useTable<GameRule>();

  const getData = async () => {
    loading.value = true;
    try {
      const res = await getGameRuleList();
      list.value = res?.data?.data || [];
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    getData();
  });

  const handleMenuClicked = async (gameRule: GameRule, action: string) => {
    switch (action) {
      case 'EDIT': {
        editorConfig.value = {
          visible: true,
          gameRule,
        };
        break;
      }
      case 'DELETE': {
        Modal.confirm({
          title: '确定删除该规程？',
          content: '删除后无法恢复',
          onOk: async () => {
            await deleteGameRule(gameRule.id);
            Message.success('已删除');
            getData();
          },
        });
        break;
      }
      default: {
        break;
      }
    }
  };

  const handleEditDone = (refresh: boolean) => {
    editorConfig.value = { visible: false };
    if (refresh) {
      getData();
    }
  };
</script>

<template>
  <div style="padding: 20px">
    <a-row :gutter="[20, 20]">
      <a-col>
        <a-card title="赛事规程模板" :bordered="false">
          <template #extra>
            <a-button type="primary" @click="editorConfig = { visible: true }">
              <template #icon><icon-plus /></template>
              新建模板
            </a-button>
          </template>
        </a-card>
      </a-col>

      <a-col>
        <a-card :bordered="false">
          <a-table
            :bordered="{ cell: true }"
            :data="list"
            :loading="loading"
            :pagination="false"
          >
            <template #columns>
              <a-table-column title="规程名称" data-index="ruleTitle" />
              <a-table-column title="创建时间" data-index="gmtCreate">
                <template #cell="{ record }">
                  {{ dayjs(record.gmtCreate).format('YYYY/MM/DD HH:mm:ss') }}
                </template>
              </a-table-column>
              <a-table-column title="操作" align="center" :width="120">
                <template #cell="{ record }">
                  <a-dropdown
                    @select="handleMenuClicked(record, $event as string)"
                  >
                    <a-link> 操作 </a-link>
                    <template #content>
                      <a-doption value="EDIT"> 编辑 </a-doption>
                      <a-doption value="DELETE"> 删除 </a-doption>
                    </template>
                  </a-dropdown>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

    <RuleEditor
      v-if="editorConfig.visible"
      :game-rule="editorConfig.gameRule"
      @close="handleEditDone"
    />
  </div>
</template>
